<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta th:include="common/commons :: layui"/>
    <title>编辑相机</title>
    <style type="text/css">
        .layui-form-pane .layui-form-label {
            width: 200px;
        }

        .layui-form-pane .layui-input-block {
            margin-left: 200px;
        }
    </style>
</head>
<body style="text-align:center">
<div class="layui-fluid" style="margin-top: 20px">
    <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <form id="cameraEdit" class="layui-form layui-form-pane" th:action="@{/camera/edit}" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">相机ID</label>
            <div class="layui-input-block">
                <input type="text" th:value="${camera.id}" class="layui-input layui-disabled"
                       disabled="disabled"/>
            </div>
        </div>
        <input type="hidden" th:value="${camera.id}" name="id"/>
        <div class="layui-form-item ">
            <label class="layui-form-label">相机sn</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="sn" th:value="${camera.sn}" required="required"/>
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">相机名</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="name" th:value="${camera.name}" required="required"/>
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">局域网ip</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="ip" th:value="${camera.ip}" required="required"/>
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="password" th:value="${camera.password}" required="required"/>
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">门(例：东门、西门)</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="door" th:value="${camera.door}" required="required"/>
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">进出口选择：</label>
            <div class="layui-input-block">
                进口：<input type="radio" class="layui-input" name="whetherIn" id="t1" th:value="0"/>
                出口：<input type="radio" class="layui-input" name="whetherIn" id="t2" th:value="1"/>
                <input type="hidden" th:value="${camera.whetherIn}" id="whetherIn"/>
            </div>
        </div>
        <div class="layui-form-item">
            <div style="margin:0 auto">
                <button class="layui-btn" type="submit">确定</button>
            </div>
        </div>
    </form>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    <script type="text/javascript" th:inline="javascript">
        layui.use('form', function () {
            var form = layui.form;
            $("#cameraEdit").ajaxForm(function (success) {
                if (success.code == 200) {
                    msg.success('修改成功', function () {
                        parent.window.location.reload();
                    });
                    // msg.success("修改成功");
                    // parent.window.location.reload();
                } else {
                    msg.error('修改失败', function () {
                        parent.window.location.reload();
                    });
                }
            })
        });

        $(function () {
            var camera = [[${camera}]];
            if ($("#whetherIn").val() == 0) {
                $("#t1").attr("checked", true);
            } else {
                $("#t2").attr("checked", true);
            }
        });

    </script>
</div>
</body>
</html>